<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./build/react.js"></script>
	<script src="./build/react-dom.js"></script>
	<script src="./build/browser.min.js"></script>
</head>
<body>
	<div id="example"></div>
	<script type="text/babel">
		var arr = [
			<div key="1">hello world 01</div>,
			<div key="2">hello world 02</div>
		];
		ReactDOM.render(
			<div>{arr}</div>,
			document.querySelector('#example')
		)
	</script>
</body>
</html>
<!--
上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写（查看 Demo02 ）。


var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。



JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看 demo03 ）。


var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);
上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。
 -->
